<template>
  <div class="post-detail">
    <!-- 顶部导航栏 -->
    <div class="header-bar">
      <button class="back-btn" @click="goBack">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
          <path d="M15 18L9 12L15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"
            stroke-linejoin="round" />
        </svg>
      </button>
      <h1 class="page-title">帖子详情</h1>
      <div class="header-spacer"></div>
    </div>

    <!-- 帖子内容区域 -->
    <div v-if="loading" class="loading-container">
      <div class="loading-spinner"></div>
      <p>加载中...</p>
    </div>

    <div v-else class="post-container">
      <!-- 用户信息 -->
      <div class="user-section">
        <div class="user-info">
          <div class="avatar">
            <img v-if="post.author.avatar" :src="post.author.avatar" :alt="post.author.name" class="avatar-img">
            <img v-else src="@/assets/touxiang.png" alt="默认头像" class="avatar-img">
          </div>
          <div class="user-details">
            <div class="user-name-row">
              <span class="username">{{ post.author.name }}</span>
              <RoleBadge :roles="post.author.roles" />
            </div>
            <span class="post-time">{{ post.createdAt }}</span>
          </div>
        </div>
        <div class="post-tags">
          <span v-for="tag in post.tags" :key="tag" class="tag">
            💎 {{ tag }}
          </span>
          <span v-for="category in post.categories" :key="category" class="category-tag">
            {{ category }}
          </span>
        </div>
      </div>

      <!-- 帖子标题 -->
      <h2 class="post-title">{{ post.title }}</h2>

      <!-- 帖子内容 -->
      <div class="post-content">
        <p>{{ post.content }}</p>
      </div>

      <!-- 图片展示区域 -->
      <div v-if="post.imageList && post.imageList.length > 0" class="post-images">
        <div class="image-grid">
          <img v-for="(image, index) in post.imageList" :key="index" :src="image" alt="帖子图片" class="post-image"
            @click="previewImage(image)">
        </div>
      </div>

      <!-- 互动统计 -->
      <div class="post-actions">
        <div class="action-stats">
          <button class="stat-btn">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
              <path
                d="M12 2C12 2 5 8 5 13C5 17.4183 8.58172 21 13 21C17.4183 21 21 17.4183 21 13C21 9 17 6 17 6C17 6 17 8 15 8C15 8 14 4 12 2Z"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" />
              <path
                d="M12 17C10.3431 17 9 15.6569 9 14C9 12 11 10 11 10C11 10 11 11 12 11C12 11 13 9 12 7C12 7 15 9 15 12C15 13.6569 13.6569 15 12 15V17Z"
                fill="currentColor" />
            </svg>
            <span>{{ post.views }}</span>
          </button>

          <button class="stat-btn like-btn" :class="{ liked: isLiked }" @click="toggleLike">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
              <path
                d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
                :fill="isLiked ? 'currentColor' : 'none'" stroke="currentColor" stroke-width="2" />
            </svg>
            <span>{{ post.likes }}</span>
          </button>
        </div>

        <button class="share-btn" @click="sharePost">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
            <circle cx="18" cy="5" r="3" stroke="currentColor" stroke-width="2" />
            <circle cx="6" cy="12" r="3" stroke="currentColor" stroke-width="2" />
            <circle cx="18" cy="19" r="3" stroke="currentColor" stroke-width="2" />
            <line x1="8.59" y1="13.51" x2="15.42" y2="17.49" stroke="currentColor" stroke-width="2" />
            <line x1="15.41" y1="6.51" x2="8.59" y2="10.49" stroke="currentColor" stroke-width="2" />
          </svg>
          分享
        </button>
      </div>
    </div>

    <!-- 评论区域 -->
    <div class="comments-section">
      <div class="comments-header">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
          <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" stroke="currentColor"
            stroke-width="2" />
        </svg>
        <span class="comments-title">全部评论</span>
      </div>

      <div class="comments-list">
        <!-- 评论加载状态 -->
        <div v-if="commentsLoading" class="comments-loading-container">
          <div class="loading-spinner"></div>
          <p>正在加载评论...</p>
        </div>

        <!-- 无评论状态 -->
        <div v-else-if="comments.length === 0" class="no-comments">
          暂无评论，快来抢沙发~
        </div>

        <!-- 评论列表 -->
        <div v-else v-for="comment in comments" :key="comment.id" class="comment-item">
          <div class="comment-header">
            <div class="comment-user-info">
              <div class="comment-avatar">
                <img v-if="comment.author.avatar" :src="comment.author.avatar" :alt="comment.author.name"
                  class="avatar-img">
                <img v-else src="@/assets/touxiang.png" alt="默认头像" class="avatar-img">
              </div>
              <div class="comment-user-details">
                <div class="comment-user-name-row">
                  <span class="comment-username">{{ comment.author.name }}</span>
                  <RoleBadge :roles="comment.author.roles" />
                </div>
                <span class="comment-time">{{ comment.createdAt }}</span>
              </div>
            </div>
            <button class="comment-like-btn" :class="{ liked: comment.isLiked }" @click="toggleCommentLike(comment)">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                <path
                  d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
                  :fill="comment.isLiked ? 'currentColor' : 'none'" stroke="currentColor" stroke-width="2" />
              </svg>
              <span v-if="comment.likes > 0">{{ comment.likes }}</span>
            </button>
          </div>
          <div class="comment-content">
            {{ comment.content }}
          </div>

          <!-- 操作按钮 -->
          <div class="comment-actions">
            <button class="reply-btn" @click="showReplyInput(comment)">
              回复
            </button>
            <button v-if="comment.userId == userStore.uid" class="delete-btn" @click="deleteComment(comment)">
              删除
            </button>
          </div>

          <!-- 回复输入框 -->
          <div v-if="replyingTo === comment.id" class="reply-input-container">
            <input type="text" v-model="replyContent" :placeholder="`回复 ${comment.author.name}...`" class="reply-input"
              @keyup.enter="submitReply(comment)">
            <button class="reply-send-btn" @click="submitReply(comment)">发送</button>
            <button class="reply-cancel-btn" @click="cancelReply">取消</button>
          </div>

          <!-- 子评论 -->
          <div v-if="comment.children && comment.children.length > 0" class="replies-container">
            <div v-for="reply in comment.children" :key="reply.id" class="reply-item">
              <div class="reply-header">
                <div class="reply-user-info">
                  <div class="reply-avatar">
                    <img v-if="reply.author.avatar" :src="reply.author.avatar" :alt="reply.author.name"
                      class="avatar-img">
                    <img v-else src="@/assets/touxiang.png" alt="默认头像" class="avatar-img">
                  </div>
                  <div class="reply-user-details">
                    <div class="reply-user-name-row">
                      <span class="reply-username">{{ reply.author.name }}</span>
                      <RoleBadge :roles="reply.author.roles" />
                    </div>
                    <span class="reply-time">{{ reply.createTime }}</span>
                  </div>
                </div>
                <button class="reply-like-btn" :class="{ liked: reply.isLiked }" @click="toggleReplyLike(reply)">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
                    <path
                      d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"
                      :fill="reply.isLiked ? 'currentColor' : 'none'" stroke="currentColor" stroke-width="2" />
                  </svg>
                  <span v-if="reply.likeCount > 0">{{ reply.likeCount }}</span>
                </button>
              </div>
              <div class="reply-content">
                {{ reply.content }}
              </div>
              <!-- 回复删除按钮 -->
              <button v-if="reply.userId == userStore.uid" class="delete-reply-btn" @click="deleteComment(reply)">
                删除
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部评论输入框 -->
    <div class="comment-input-bar">
      <div class="comment-input-container">
        <div class="input-wrapper">
          <input type="text" v-model="newComment" placeholder="说点什么..." class="comment-input"
            @keyup.enter="submitComment">
        </div>
        <button class="send-btn" @click="submitComment" :disabled="!newComment.trim()">
          发送
        </button>
      </div>
    </div>

    <!-- 图片预览弹窗 -->
    <teleport to="body">
      <div v-if="previewImageUrl" class="image-preview-overlay" @click="closePreview">
        <button class="preview-close-btn" @click="closePreview">×</button>
        <img :src="previewImageUrl" class="preview-image" @click.stop alt="预览图片">
      </div>
    </teleport>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getPostDetailById, getCommentTree, addForumComment, togglePostLike, toggleCommentLike as toggleCommentLikeApi, deleteForumComment } from '@/api/forum'
import { getCurrentUserPermissions } from '@/api/user'
import { useUserStore } from '@/stores/user'
import RoleBadge from '@/components/RoleBadge.vue'

const route = useRoute()
const router = useRouter()
const userStore = useUserStore()

// 帖子详情数据
const post = ref({
  id: '',
  title: '',
  content: '',
  author: {
    name: '',
    avatar: '',
    badge: '',
    roles: []
  },
  createdAt: '',
  views: 0,
  likes: 0,
  comments: 0,
  tags: [],
  categories: [],
  images: []
})

// 评论数据
const comments = ref([])
const commentsLoading = ref(true) // 评论加载状态

const newComment = ref('')
const isLiked = ref(false)
const loading = ref(true)
const replyingTo = ref(null) // 当前正在回复的评论ID
const replyContent = ref('') // 回复内容
const previewImageUrl = ref('') // 预览图片URL

const goBack = () => {
  router.back()
}

const toggleLike = async () => {
  // 检查用户是否已登录
  if (!userStore.uid) {
    alert('请先登录')
    router.push('/user/login')
    return
  }

  try {
    // 调用点赞接口
    const res = await togglePostLike(post.value.id, userStore.uid)

    console.log('点赞接口返回:', res)

    // 根据接口返回的数据更新状态
    if (res.code === 200 && res.data) {
      // 更新点赞状态
      isLiked.value = res.data.liked

      // 更新点赞数
      post.value.likes = res.data.count

      console.log(`帖子 ${post.value.id} 点赞状态已更新: liked=${res.data.liked}, count=${res.data.count}`)
    }
  } catch (error) {
    console.error('点赞操作失败:', error)
    alert('点赞操作失败，请稍后重试')
  }
}

const sharePost = () => {
  console.log('分享帖子')
  // 这里可以实现分享功能
}

// 图片预览功能
const previewImage = (imageUrl) => {
  previewImageUrl.value = imageUrl
  document.body.style.overflow = 'hidden'
}

// 关闭预览
const closePreview = () => {
  previewImageUrl.value = ''
  document.body.style.overflow = ''
}

const toggleCommentLike = async (comment) => {
  // 检查用户是否已登录
  if (!userStore.uid) {
    alert('请先登录')
    router.push('/user/login')
    return
  }

  try {
    // 调用评论点赞接口
    const res = await toggleCommentLikeApi(comment.id, userStore.uid)

    console.log('评论点赞接口返回:', res)

    // 根据接口返回的数据更新状态
    if (res.code === 200 && res.data) {
      // 更新点赞状态
      comment.isLiked = res.data.liked

      // 更新点赞数
      comment.likes = res.data.count

      console.log(`评论 ${comment.id} 点赞状态已更新: liked=${res.data.liked}, count=${res.data.count}`)
    }
  } catch (error) {
    console.error('评论点赞操作失败:', error)
    alert('评论点赞操作失败，请稍后重试')
  }
}

const toggleReplyLike = async (reply) => {
  // 检查用户是否已登录
  if (!userStore.uid) {
    alert('请先登录')
    router.push('/user/login')
    return
  }

  try {
    // 调用评论点赞接口（回复也是评论）
    const res = await toggleCommentLikeApi(reply.id, userStore.uid)

    console.log('回复点赞接口返回:', res)

    // 根据接口返回的数据更新状态
    if (res.code === 200 && res.data) {
      // 更新点赞状态
      reply.isLiked = res.data.liked

      // 更新点赞数
      reply.likeCount = res.data.count

      console.log(`回复 ${reply.id} 点赞状态已更新: liked=${res.data.liked}, count=${res.data.count}`)
    }
  } catch (error) {
    console.error('回复点赞操作失败:', error)
    alert('回复点赞操作失败，请稍后重试')
  }
}

const submitComment = async () => {
  if (!newComment.value.trim()) {
    return
  }

  // 检查用户是否已登录
  if (!userStore.uid) {
    alert('请先登录')
    router.push('/user/login')
    return
  }

  try {
    // 调用API发表评论
    const commentData = {
      content: newComment.value.trim(),
      likeCount: 0,
      parentId: 0, // 一级评论，parentId为0
      postId: post.value.id,
      replyCount: 0,
      status: 0,
      userId: userStore.uid
    }

    const res = await addForumComment(commentData)
    console.log('发表评论成功:', res)

    if (res.code === 200) {
      // 发表成功后，重新获取评论列表
      await fetchCommentTree(post.value.id)
      post.value.comments++
      newComment.value = ''
    } else {
      alert('评论发表失败：' + (res.message || '未知错误'))
    }
  } catch (error) {
    console.error('发表评论失败:', error)
    alert('评论发表失败，请稍后重试')
  }
}

// 获取帖子详情
const fetchPostDetail = async (postId) => {
  try {
    loading.value = true
    console.log('正在获取帖子详情，ID:', postId)
    const res = await getPostDetailById(postId)
    console.log('获取帖子详情成功:', res)

    if (res.code === 200 && res.data) {
      // 将API返回的数据转换为前端所需格式
      const postData = res.data
      post.value = {
        id: postData.id,
        userId: postData.userId,
        title: postData.title || '无标题',
        content: postData.content || '无内容',
        author: {
          name: postData.users?.nickName || postData.authorName || '匿名用户',
          avatar: postData.users?.avatar || '', // 完整的头像URL
          badge: postData.authorBadge || '',
          roles: []
        },
        createdAt: postData.createTime || '未知时间',
        views: postData.viewCount || 0,
        likes: postData.likeCount || 0,
        comments: postData.commentCount || 0,
        tags: postData.isEssence ? ['精华'] : [],
        categories: postData.categoryName ? [postData.categoryName] : [],
        images: postData.images || [],
        imageList: postData.imageList || [] // 添加imageList字段
      }

      // 更新点赞状态
      isLiked.value = postData.liked || false
      console.log('帖子点赞状态:', postData.liked)
      
      // 获取帖子作者的角色信息
      if (postData.userId) {
        try {
          const permissionRes = await getCurrentUserPermissions(postData.userId)
          if (permissionRes.code === 200 && permissionRes.data && permissionRes.data.roleList) {
            post.value.author.roles = permissionRes.data.roleList
          }
        } catch (error) {
          console.error('获取帖子作者权限失败:', error)
        }
      }
    }
  } catch (error) {
    console.error('获取帖子详情失败:', error)
  } finally {
    loading.value = false
  }
}

// 获取评论树
const fetchCommentTree = async (postId) => {
  try {
    console.log('正在获取评论树，帖子ID:', postId)
    const res = await getCommentTree(postId)
    console.log('获取评论树成功:', res)

    if (res.code === 200 && res.data) {
      // 将API返回的评论数据转换为前端所需格式
      const commentData = res.data
      comments.value = commentData.map(comment => {
        console.log('评论userId:', comment.userId, '当前用户uid:', userStore.uid, '是否相等:', comment.userId === userStore.uid)
        return {
          id: comment.id,
          userId: comment.userId, // 保存userId用于判断是否可以删除
          author: {
            name: comment.users?.nickName || `用户${comment.userId}`,
            avatar: comment.users?.avatar || '',
            badge: '',
            roles: []
          },
          content: comment.content,
          createdAt: comment.createTime,
          likes: comment.likeCount,
          isLiked: comment.liked || false, // 从接口读取点赞状态
          children: comment.children ? comment.children.map(reply => ({
            id: reply.id,
            userId: reply.userId,
            author: {
              name: reply.users?.nickName || `用户${reply.userId}`,
              avatar: reply.users?.avatar || '',
              roles: []
            },
            content: reply.content,
            createTime: reply.createTime,
            likeCount: reply.likeCount || 0,
            isLiked: reply.liked || false,
            parentId: reply.parentId,
            postId: reply.postId,
            replyCount: reply.replyCount || 0,
            status: reply.status
          })) : []
        }
      })
      
      // 获取所有评论和回复作者的角色信息
      for (const comment of comments.value) {
        if (comment.userId) {
          try {
            const permissionRes = await getCurrentUserPermissions(comment.userId)
            if (permissionRes.code === 200 && permissionRes.data && permissionRes.data.roleList) {
              comment.author.roles = permissionRes.data.roleList
            }
          } catch (error) {
            console.error(`获取评论作者${comment.userId}权限失败:`, error)
          }
        }
        
        // 获取回复作者的角色信息
        if (comment.children && comment.children.length > 0) {
          for (const reply of comment.children) {
            if (reply.userId) {
              try {
                const permissionRes = await getCurrentUserPermissions(reply.userId)
                if (permissionRes.code === 200 && permissionRes.data && permissionRes.data.roleList) {
                  reply.author.roles = permissionRes.data.roleList
                }
              } catch (error) {
                console.error(`获取回复作者${reply.userId}权限失败:`, error)
              }
            }
          }
        }
      }

      // 计算评论总数（包括一级评论和所有回复）
      let totalComments = 0
      comments.value.forEach(comment => {
        totalComments++ // 一级评论
        if (comment.children && comment.children.length > 0) {
          totalComments += comment.children.length // 回复数量
        }
      })
      post.value.comments = totalComments
      console.log('评论总数:', totalComments)
    }
  } catch (error) {
    console.error('获取评论树失败:', error)
  } finally {
    // 无论成功还是失败，都设置评论加载状态为false
    commentsLoading.value = false
  }
}

// 显示回复输入框
const showReplyInput = (comment) => {
  replyingTo.value = comment.id
  replyContent.value = ''
}

// 取消回复
const cancelReply = () => {
  replyingTo.value = null
  replyContent.value = ''
}

// 提交回复
const submitReply = async (comment) => {
  if (!replyContent.value.trim()) {
    return
  }

  // 检查用户是否已登录
  if (!userStore.uid) {
    alert('请先登录')
    router.push('/user/login')
    return
  }

  try {
    // 调用API发表回复
    const replyData = {
      content: replyContent.value.trim(),
      likeCount: 0,
      parentId: comment.id, // 回复评论时，parentId为当前评论的id
      postId: post.value.id,
      replyCount: 0,
      status: 0,
      userId: userStore.uid
    }

    const res = await addForumComment(replyData)
    console.log('发表回复成功:', res)

    if (res.code === 200) {
      // 发表成功后，重新获取评论列表
      await fetchCommentTree(post.value.id)
      replyingTo.value = null
      replyContent.value = ''
    } else {
      alert('回复发表失败：' + (res.message || '未知错误'))
    }
  } catch (error) {
    console.error('发表回复失败:', error)
    alert('回复发表失败，请稍后重试')
  }
}

// 删除评论
const deleteComment = async (comment) => {
  // 检查用户是否已登录
  if (!userStore.uid) {
    alert('请先登录')
    router.push('/user/login')
    return
  }

  // 检查是否是自己的评论
  if (comment.userId != userStore.uid) {
    alert('只能删除自己的评论')
    return
  }

  // 确认删除
  if (!confirm('确定要删除这条评论吗？')) {
    return
  }

  try {
    const res = await deleteForumComment(comment.id, userStore.uid)
    console.log('删除评论成功:', res)

    if (res.code === 200) {
      // 删除成功后，重新获取评论列表
      await fetchCommentTree(post.value.id)
      alert('评论已删除')
    } else {
      alert('删除失败：' + (res.message || '未知错误'))
    }
  } catch (error) {
    console.error('删除评论失败:', error)
    alert('删除评论失败，请稍后重试')
  }
}

onMounted(() => {
  const postId = route.params.id
  console.log('加载帖子:', postId)
  // 设置评论加载状态为true
  commentsLoading.value = true
  fetchPostDetail(postId)
  fetchCommentTree(postId)
})
</script>

<style scoped>
.post-detail {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 140px;
  /* 为底部输入框和tabbar留空间 */
}

/* 顶部导航栏 */
.header-bar {
  background: white;
  display: flex;
  align-items: center;
  padding: 15px 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

.back-btn {
  background: none;
  border: none;
  color: #333;
  cursor: pointer;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-title {
  flex: 1;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin: 0;
}

.header-spacer {
  width: 34px;
  /* 与返回按钮宽度相同，保持标题居中 */
}

/* 加载状态 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px 20px;
  background: white;
  margin: 10px 15px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #4285f4;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 15px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* 帖子容器 */
.post-container {
  background: white;
  margin: 10px 15px;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 用户信息区域 */
.user-section {
  margin-bottom: 20px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-details {
  flex: 1;
}

.user-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.username {
  font-weight: bold;
  color: #333;
  font-size: 16px;
}

.user-badge {
  background: #ff69b4;
  color: white;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 12px;
}

.post-time {
  color: #999;
  font-size: 14px;
}

.post-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tag {
  background: #e3f2fd;
  color: #1976d2;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.category-tag {
  background: #e8f5e8;
  color: #2e7d32;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
}

/* 帖子标题 */
.post-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  line-height: 1.4;
  margin-bottom: 15px;
}

/* 帖子内容 */
.post-content {
  margin-bottom: 20px;
}

.post-content p {
  color: #666;
  line-height: 1.6;
  font-size: 16px;
  margin: 0;
}

/* 图片展示区域 */
.post-images {
  margin-bottom: 20px;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.post-image {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.post-image:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 图片预览样式 */
.image-preview-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 60px 20px 20px;
  box-sizing: border-box;
}

.preview-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
}

.preview-close-btn {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  background-color: rgba(255, 255, 255, 0.95);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  line-height: 1;
  font-weight: normal;
  color: #333;
  cursor: pointer;
  transition: all 0.2s;
  z-index: 10000;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.preview-close-btn:active {
  background-color: #fff;
  transform: scale(0.9);
}

/* 移动端优化 */
@media (max-width: 768px) {
  .image-preview-overlay {
    padding: 70px 10px 10px;
  }

  .preview-close-btn {
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    font-size: 28px;
  }
}

/* 互动统计 */
.post-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 15px;
  border-top: 1px solid #f0f0f0;
}

.action-stats {
  display: flex;
  gap: 20px;
}

.stat-btn {
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  padding: 5px;
  transition: color 0.3s;
}

.stat-btn:hover {
  color: #666;
}

.like-btn.liked {
  color: #ff4757;
}

.share-btn {
  background: none;
  border: none;
  color: #4285f4;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  padding: 8px 12px;
  border-radius: 20px;
  transition: background-color 0.3s;
}

.share-btn:hover {
  background: rgba(66, 133, 244, 0.1);
}

/* 评论区域 */
.comments-section {
  background: white;
  margin: 10px 15px;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.comments-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 15px;
}

.comments-title {
  color: #333;
  font-weight: bold;
  font-size: 16px;
}

.comments-count {
  background: #4285f4;
  color: white;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  min-width: 20px;
  text-align: center;
}

.no-comments {
  text-align: center;
  color: #999;
  padding: 30px 0;
  font-size: 14px;
}

/* 评论加载状态 */
.comments-loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 0;
}

.comments-loading-container .loading-spinner {
  width: 30px;
  height: 30px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #4285f4;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 10px;
}

.comments-loading-container p {
  color: #999;
  font-size: 14px;
  margin: 0;
}

/* 评论列表样式 */
.comment-item {
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0;
}

.comment-item:last-child {
  border-bottom: none;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.comment-user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.comment-avatar {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.comment-user-details {
  flex: 1;
}

.comment-user-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.comment-username {
  font-weight: bold;
  color: #333;
  font-size: 14px;
}

.comment-user-badge {
  background: #ff9500;
  color: white;
  padding: 2px 6px;
  border-radius: 8px;
  font-size: 10px;
}

.comment-time {
  color: #999;
  font-size: 12px;
}

.comment-like-btn {
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 4px;
  transition: color 0.3s;
}

.comment-like-btn:hover {
  color: #666;
}

.comment-like-btn.liked {
  color: #ff4757;
}

.comment-content {
  color: #666;
  line-height: 1.5;
  font-size: 14px;
  margin-left: 45px;
  /* 与头像对齐 */
}

/* 子评论样式 */
.replies-container {
  margin-top: 10px;
  margin-left: 45px;
  /* 与评论内容对齐 */
  border-left: 2px solid #f0f0f0;
  padding-left: 15px;
}

.reply-item {
  padding: 10px 0;
  border-bottom: 1px solid #f8f8f8;
}

.reply-item:last-child {
  border-bottom: none;
}

.reply-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 5px;
}

.reply-user-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.reply-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.reply-user-details {
  flex: 1;
}

.reply-user-name-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 2px;
}

.reply-username {
  font-weight: bold;
  color: #333;
  font-size: 13px;
}

.reply-time {
  color: #999;
  font-size: 11px;
}

.reply-like-btn {
  background: none;
  border: none;
  color: #999;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  padding: 3px;
  transition: color 0.3s;
}

.reply-like-btn:hover {
  color: #666;
}

.reply-like-btn.liked {
  color: #ff4757;
}

.reply-content {
  color: #666;
  line-height: 1.4;
  font-size: 13px;
  margin-left: 36px;
  /* 与回复头像对齐 */
}

/* 评论操作按钮 */
.comment-actions {
  display: flex;
  gap: 15px;
  margin-left: 45px;
  margin-top: 5px;
}

.reply-btn {
  background: none;
  border: none;
  color: #4285f4;
  cursor: pointer;
  font-size: 13px;
  padding: 5px 0;
  transition: color 0.3s;
}

.reply-btn:hover {
  color: #3367d6;
}

.delete-btn {
  background: none;
  border: none;
  color: #ff4757;
  cursor: pointer;
  font-size: 13px;
  padding: 5px 0;
  transition: color 0.3s;
}

.delete-btn:hover {
  color: #d63031;
}

.delete-reply-btn {
  background: none;
  border: none;
  color: #ff4757;
  cursor: pointer;
  font-size: 12px;
  padding: 3px 0;
  margin-left: 36px;
  margin-top: 5px;
  transition: color 0.3s;
}

.delete-reply-btn:hover {
  color: #d63031;
}

/* 回复输入框容器 */
.reply-input-container {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 45px;
  margin-top: 10px;
  padding: 10px;
  background: #f8f8f8;
  border-radius: 8px;
}

.reply-input {
  flex: 1;
  background: white;
  border: 1px solid #e0e0e0;
  padding: 8px 12px;
  border-radius: 20px;
  font-size: 13px;
  outline: none;
}

.reply-input::placeholder {
  color: #999;
}

.reply-send-btn {
  background: #4285f4;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 13px;
  transition: background-color 0.3s;
}

.reply-send-btn:hover {
  background: #3367d6;
}

.reply-cancel-btn {
  background: #f0f0f0;
  color: #666;
  border: none;
  padding: 8px 16px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 13px;
  transition: background-color 0.3s;
}

.reply-cancel-btn:hover {
  background: #e0e0e0;
}

/* 底部评论输入框 */
.comment-input-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  padding: 15px;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  border-top: 1px solid #e0e0e0;
}

.comment-input-container {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 800px;
  margin: 0 auto;
}

.input-wrapper {
  flex: 1;
  position: relative;
}

.comment-input {
  width: 100%;
  background: #f5f5f5;
  border: none;
  padding: 12px 15px;
  border-radius: 25px;
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
}

.comment-input::placeholder {
  color: #999;
}

.send-btn {
  background: #4285f4;
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 25px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  transition: background-color 0.3s;
}

.send-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.send-btn:not(:disabled):hover {
  background: #3367d6;
}

/* 移动端适配 */
@media (max-width: 768px) {

  .post-container,
  .comments-section {
    margin: 10px;
    padding: 15px;
  }

  .header-bar {
    padding: 12px 15px;
  }

  .page-title {
    font-size: 16px;
  }

  .post-title {
    font-size: 18px;
  }

  .post-content p {
    font-size: 15px;
  }

  .action-stats {
    gap: 15px;
  }

  .comment-input-bar {
    padding: 12px;
    bottom: 60px;
    /* 在移动端避免被tabbar遮挡 */
  }
}

@media (max-width: 480px) {
  .user-info {
    gap: 10px;
  }

  .avatar {
    width: 45px;
    height: 45px;
    font-size: 16px;
  }

  .username {
    font-size: 15px;
  }

  .post-title {
    font-size: 17px;
  }

  .action-stats {
    gap: 12px;
  }

  .stat-btn {
    font-size: 13px;
  }

  .comment-content {
    margin-left: 40px;
    font-size: 13px;
  }

  .comment-avatar {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }

  .comment-username {
    font-size: 13px;
  }
}
</style>